<script setup>
import {ref} from "vue"
import ComSide from '@/components/ComSide.vue';
import ComHeader from '@/components/ComHeader.vue';
import ComMain from "@/components/ComMain.vue";
</script>

<template>
  <el-container>
  <el-aside width="200px">
    <ComSide></ComSide>
  </el-aside>
  <el-container>
    <el-header>
      <ComHeader></ComHeader>
    </el-header>
    <el-main>
      <ComMain></ComMain>
      <el-card>
        <RouterView />
      </el-card>
    </el-main>
    <el-footer>
      <ComFooter></ComFooter>
    </el-footer>
  </el-container>
</el-container>


</template>
<style scoped>
.el-container {
  width: 100%;
  height: 100%;
}

.el-container .el-header,
.el-container .el-footer {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.el-container .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}

.el-container .el-menu {
  border-right: none;
}

.el-container .el-main {
  padding: 0;
}

.el-container .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>
